<template>
  <div class="employees">
    <headTool>
      <div class="btns" slot="after">
        <el-button @click="exportComplexExcel" type="warning" size="small"
          >复杂导出</el-button
        >
        <el-button @click="exportExcel" type="success" size="small"
          >导出</el-button
        >
        <el-button
          @click="
            $router.push({ path: '/importExcel', query: { type: 'employees' } })
          "
          type="primary"
          size="small"
          >导入</el-button
        >
        <el-button
          @click="showDialog = true"
          type="primary"
          size="small"
          icon="el-icon-plus"
          >新增员工</el-button
        >
      </div>
    </headTool>

    <el-card class="main-card">
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="120px">
        </el-table-column>
        <el-table-column prop="username" label="姓名" width="120px">
        </el-table-column>
        <el-table-column prop="username" label="头像">
          <template slot-scope="{ row }">
            <!-- 点击头像要弹出二维码 -->
            <img
              @click="showQrcode(row.staffPhoto)"
              style="width:60px"
              :src="row.staffPhoto"
              v-imgerror="defaultImg"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column prop="workNumber" label="工号" width="120px">
        </el-table-column>
        <el-table-column prop="inServiceStatus" label="聘用形式">
          <template slot-scope="{ row }">
            {{ row.inServiceStatus | formateHireType }}
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号码"> </el-table-column>
        <el-table-column prop="departmentName" label="部门"> </el-table-column>
        <el-table-column prop="timeOfEntry" label="入职时间">
          <!-- 时间格式转化 -->
          <template slot-scope="{ row }">
            {{ row.timeOfEntry | formatDate }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="enableState" label="是否在职"> </el-table-column> -->
        <el-table-column prop="enableState" label="状态">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.enableState"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="230" label="操作">
          <!-- 表格默认只能放文字 -->
          <div
            slot-scope="{ row }"
            style="display: flex; justify-content: space-between"
          >
            <el-link
              @click="
                $router.push({
                  path: '/employees/detail',
                  query: { id: row.id }
                })
              "
              type="primary"
              >查看</el-link
            >
            <el-link type="primary">转正</el-link>
            <el-link type="primary">调岗</el-link>
            <el-link type="primary">离职</el-link>
            <el-link type="primary" @click="showRole(row.id)">角色</el-link>
            <el-link @click="delEmployee(row.id)" type="primary">删除</el-link>
          </div>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        :current-page="pageInfo.page"
        :page-size="pageInfo.size"
        layout="total, prev, pager, next"
        :total="pageInfo.total"
        style="text-align:center"
        @current-change="changePage"
      >
      </el-pagination>
    </el-card>
    <addEmp :showDialog.sync="showDialog" />
    <!-- 二维码弹出框 -->
    <el-dialog title="二维码" :visible.sync="showCodeDialog">
      <el-row type="flex" justify="center">
        <canvas ref="canvas"></canvas>
      </el-row>
    </el-dialog>
    <!-- 角色弹出框 -->
    <role-setting
      ref="role"
      :userId="currentId"
      :showRoleDialog.sync="showRoleDialog"
    />
  </div>
</template>

<script>
import { getEmployeesList, delEmployee } from '@/api/employees'
// 导入新增
import constant from '@/api/constant/employees'
import addEmp from './components/add-emp.vue'
// 时间格式转换
import { formatDate } from '@/filters'
// 导入二维码
import QRCode from 'qrcode'
// 导入角色对话框
import roleSetting from './components/role-setting.vue'

export default {
  name: 'employees',
  components: {
    addEmp,
    roleSetting
  },
  data () {
    return {
      // 角色
      showRoleDialog: false,
      currentId: '',
      // 二维码显示框
      showCodeDialog: false,
      // 员工信息
      form: {},
      showDialog: false,
      defaultImg: require('@/assets/common/avatar-placeholder.jpg'),
      tableData: [],
      pageInfo: {
        page: 1,
        size: 5,
        total: 0
      }
    }
  },
  created () {
    this.getEmpList()
  },
  methods: {
    // 角色按钮
    async showRole (id) {
      this.showRoleDialog = true
      // 同时传递员工id
      this.currentId = id
      // 调用子组件里的方法获取当前用户的数据（包含角色分配）
      // await 先获取id才能根据id获取当前用户信息
      await this.$refs.role.getUserInfo(id)
    },
    // 二维码显示：把图片路径给到他生成二维码。
    showQrcode (url) {
      if (url) {
        this.showCodeDialog = true
        // 点击头像为true时还没渲染里面的dom元素，也就意味着还没有canvas标签。
        // 所以需要等dom渲染了，再来找canvas标签，并把它画成二维码
        // 用一个回调函数：nextTick():下次dom更新使用。
        this.$nextTick(() => {
          // 参数一：原生dom元素；参数二：字符串（例如图片路径）。
          QRCode.toCanvas(this.$refs.canvas, url)
        })
      } else {
        this.$message.warning('该员工没有图片')
      }
    },
    // 获取员工列表
    async getEmpList () {
      let res = await getEmployeesList(this.pageInfo)
      // console.log(res)
      // 员工数据：
      this.tableData = res.data.rows
      // 员工状态由Number转为布尔类型:
      this.tableData.forEach(item => {
        item.enableState = item.enableState == 1 ? true : false
      })
      this.pageInfo.total = res.data.total
    },
    // 点击当前页:page参数是饿了么ui定义好的参数，点击哪个页码就触发按个页码的事件。
    changePage (page) {
      // console.log(page)
      //
      this.pageInfo.page = page
      // 重新加载最新员工列表
      this.getEmpList()
    },
    // 删除员工
    async delEmployee (id) {
      try {
        await this.$confirm('确认删除吗')
        await delEmployee(id)
        this.$message.success('删除成功')
        this.getEmpList()
      } catch (error) {
        console.log(error)
      }
    },
    // 导出事件：
    // 目的：把所有的员工数据导出
    async exportExcel () {
      let res = await getEmployeesList({
        page: 1,
        size: this.pageInfo.total
      })
      console.log(res)

      const headers = {
        手机号: 'mobile',
        姓名: 'username',
        入职日期: 'timeOfEntry',
        聘用形式: 'formOfEmployment',
        转正日期: 'correctionTime',
        工号: 'workNumber',
        部门: 'departmentName'
      }

      let list = res.data.rows
      // 一、表头处理：
      let keys = Object.keys(headers)

      // 二、表格内容处理：
      let bigArr = list.map(item => {
        let arr = []
        for (let key in headers) {
          let engKey = headers[key]
          if (key == '入职日期' || key == '转正日期') {
            let time = formatDate(item[engKey])
            arr.push(time)
          } else if (key == '聘用形式') {
            let str = item[engKey] == 1 ? '正式' : '未知'
            arr.push(str)
          } else {
            arr.push(item[engKey])
          }
        }
        return arr
      })

      // 懒加载使用插件的办法
      // 哪里要用，就在哪里导入插件对应的js
      // 导入成功就调用.then
      import('@/vendor/Export2Excel').then(excel => {
        // 这个插件里写了这个方法才能用
        excel.export_json_to_excel({
          // 表头:数组
          header: keys, //表头 必填
          // 数据：二维数组
          data: bigArr,
          filename: '员工列表'
        })
      })
    },

    // 复杂导出：
    exportComplexExcel () {
      import('@/vendor/Export2Excel').then(excel => {
        // 这个插件里写了这个方法才能用
        excel.export_json_to_excel({
          // 表头:数组
          header: [
            '姓名',
            '手机号',
            '入职日期',
            '聘用形式',
            '转正日期',
            '工号',
            '部门'
          ], //表头 必填
          // 数据：二维数组
          data: [['121', '2332', '343', '444', '555', '666', '777']],
          filename: '复杂表头-员工列表',
          // 复杂表头：二维数组
          multiHeader: [['姓名', '主要信息', '', '', '', '', '部门']],
          // 合并单元格：数组
          merges: ['A1:A2', 'B1:F1', 'G1:G2']
        })
      })
    }
  },
  // 过滤器：不用计算属性，因为数据不一样。枚举数据
  // 计算属性始终监听一个数据的值的变化！！
  filters: {
    // 转化枚举值：
    formateHireType (val) {
      // 过滤器返回的是一个数组！！
      let list = constant.hireType.filter(item => item.id == val)
      // console.log(list)
      // 有些数据没有状态：正式/非正式
      return list[0] ? list[0].value : '未知'
    }
  }
}
</script>

<style lang="scss" scoped>
.main-card {
  margin: 20px;
}
</style>
